<template>
	<view class="all">
		<view class="img">
			<view class="avatar">
				<u-avatar :src="userInfo.avatar" size="50"></u-avatar>
			</view>
			<text class="nick-name">@{{userInfo.nickName}}</text>
			<text class="invitationCode">邀请码&nbsp;{{userInfo.inviteCode}}</text>
			<view class="erweima">
				<view class="erCode">
					<view class="center">
						<tki-qrcode cid="qrcode2" ref="qrcode" :val="val" :size="size" :unit="unit" :icon="icon"
							:iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"
							@result="qrR" />
					</view>
				</view>
			</view>
			<text class="tip-txt">邀请好友一起探索星屺</text>
		</view>
		<view class="share">
			<view @click="handelWeiXin" class="weixin share-btn">
				<u-icon label="微信" labelPos="bottom" labelSize="12" labelColor="#808080" name="weixin-circle-fill"
					size="45" space="3" color="#4FB25D"></u-icon>
			</view>
			<view @click="handelCopy" class="copy share-btn">
				<u-icon label="复制链接" labelPos="bottom" labelSize="12" labelColor="#808080" space="4"
					name="../../static/my_icon/copy.png" size="43"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		data() {
			return {
				userInfo: {},
				id: '',
				val: '', // 要生成的二维码值
				size: 140, // 二维码大小
				unit: 'px', // 单位
				foreground: '#fff', // 背景色
				background: '#333', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 20, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				invitationCode: ""
			}
		},
		computed: {
			baseUrl() {
				return this.$store.state.user.baseUrl;
			}
		},
		onLoad() {
			this.invitationCode = uni.getStorageSync("inviteCode")
			this.val = `${this.baseUrl}?inviteCode=${this.invitationCode}`
			console.log(this.val);
		},
		onShow() {
			this.getInfo()
		},
		components: {
			tkiQrcode
		},
		methods: {
			getInfo() {
				this.$store.dispatch('user/getInfo').then(res => {
					let {
						avatar,
						nickName,
						inviteCode
					} = res
					this.userInfo = {
						avatar,
						nickName,
						inviteCode
					}
				});
			},
			qrR() {
				console.log("二维码生成")
			},
			handelCopy() {
				let copy = `${this.baseUrl}?invitecode=${this.invitationCode}`;
				uni.setClipboardData({
					data: copy, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '链接已复制，快去粘贴给好友吧',
							icon: "none"
						})
					}
				});
			},
			handelWeiXin() {
				let url = `${this.baseUrl}?invitecode=${this.invitationCode}`;
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: url, //这里写打开app的urlschemes
					title: "星屺APP注册分享",
					summary: "我正在使用星屺APP，赶紧跟我一起来体验！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	page {
		/* background: linear-gradient(135deg, #38dde5, #1891d6); */
		background: url("@/static/image/12.jpg") no-repeat;
		background-size: 100% 100%;
	}

	.all {
		/* position: relative; */
		/* padding-top: 70rpx; */
		/* outline: 1px solid red; */
	}

	.img {
		/* position: absolute;
		top: 10%; */
		margin: 0 auto;
		margin-top: 100px;
		width: 300px;
		height: 350px;
		border-radius: 8px;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.avatar {
		border-radius: 100px;
		margin-top: -25px;
		background: #ffffd5;
		/* background: #000; */
		padding: 2px;
	}

	.nick-name {
		margin-top: 5px;
		font-size: 13px;
		color: #FF3D71;
	}

	.tip-txt {
		position: absolute;
		bottom: 40px;
	}

	.erweima {
		position: absolute;
		left: 75px;
		top: 106px;
		width: 150px;
		height: 150px;
		padding: 5px;
		text-align: center;
		/* background: #000; */
		border-radius: 8px;
		outline: 1px solid black;
	}

	.erCode {
		width: 140px;
		height: 140px;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.invitationCode {
		margin-top: 30px;
		font-size: 12px;
		/* outline: 1px solid black; */
	}

	.share-img {}

	.share {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 150rpx;
		padding: 30rpx 90rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
	}

	.share-btn {
		width: 50%;
	}
</style>
